<template>
  <view class="goodslist-container">
    <u-navbar-home :bgColor="bgColor">
      <template #left>
        <view class="title u-flex-y-center" style="color: #fff">
          <u-image :src="logo" width="80rpx" height="80rpx"></u-image>
          <view style="width: 10rpx"> </view>
          山西饲草收储交易中心
        </view>
      </template>
    </u-navbar-home>
    <view class="searchContainer u-flex-y-center">
      <u-search
        placeholder="搜索商品"
        bgColor="#fff"
        :showAction="false"
        :focus="searchFocus"
        v-model="searchdata.productName"
        @search="getGoodsList"
        @blur="getGoodsList"
      ></u-search>
    </view>
    <sortview
      ref="sortview"
      :rowtype="rowtype"
      :areaTree="areaTree"
      :dicts="dicts"
      @change="sortviewchange"
      @editrowtype="editrowtype"
    />

    <area-tree
      ref="areaTree"
      :areaTree="areaTree"
      @change="areachange"
    ></area-tree>
    <getdatascrollview
      ref="getdatascrollview"
      :api="api"
      :seardata="searchdata"
      :customStyle="scrollviewstyle"
      :onPullingfalge="false"
    >
      <template #default="{ list }">
        <!-- {{ list }} -->
        <view class="goodslist">
          <template v-for="(item, key) in list">
            <goodsitem145
              :rules="rules"
              :dicts="dicts"
              :item="item"
              :levelTypeList="levelTypeList"
            >
            </goodsitem145>
            <!-- <goodsitem
              v-if="rowtype == 'biserial'"
              :dicts="dicts"
              :item="item"
              :levelTypeList="levelTypeList"
            >
            </goodsitem>
            <goodsitem2
              v-else
              :dicts="dicts"
              :item="item"
              :levelTypeList="levelTypeList"
            >
            </goodsitem2> -->
          </template>
        </view>
      </template>
    </getdatascrollview>

    <view class="release-btn" @click="gorelease"> 发布农活信息 </view>
    <tabbar></tabbar>
  </view>
</template>

<script>
import { getHelperPage } from "@/api/release.js";
import { getClassBindingFormsByBindingId } from "@/api/release";
import { getDicts } from "@/api/dictdata";
import { getProductClassAll } from "@/api/index.js";
import { getAreaTree } from "@/api/user.js";
import { getAccessToken } from "@/utils/auth";
import areaTree from "@/pages/my/components/areaTree.vue";
import sortview from "./components/sortview.vue";
import logo from "@/static/logo.png";
export default {
  components: {
    areaTree,
    sortview,
  },
  data() {
    return {
      logo,
      bgColor: "#39C03E",
      rowtype: "singleRow",
      filterPop: false,
      levelTypefullName: "分类",
      levelTypeShow: false,
      transactionalModeText: "交易模式",
      transactionalModeShow: false,
      list: [
        {
          name: "采购",
          id: "0",
        },
        {
          name: "供应",
          id: "1",
        },
      ],
      api: getHelperPage,
      navtitle: "商品列表",
      dicts: {},
      levelTypeList: [],
      searchdata: {
        level1Type: "",
        level2Type: "",
        level3Type: "",
        unitPriceSort: "",

        province: "",
        city: "",
        county: "",
        transactionalMode: "",
        manageModel: "",
        platformTrading: "",
      },
      // 5430 84 168
      scrollviewstyle: {
        height: `calc(100vh  - 178rpx - 100rpx - 140rpx - 140rpx - env(safe-area-inset-bottom) - ${uni.$u.addUnit(
          uni.$u.getPx(uni.$u.props.navbar.height) +
            uni.$u.sys().statusBarHeight,
          "px"
        )})`,
      },
      searchFocus: false,
      areaTree: [],
      areaIdstyle: {
        width: "auto",
        margin: "0",
      },
      query: {},
      rules: [],
    };
  },
  onLoad(query) {
    if (query.type == "search") {
      this.searchFocus = true;
    }

    this.query = query;
    this.init();
  },
  mounted() {},
  computed: {
    areastr() {
      if (this.searchdata.province == "" || !this.searchdata.province) {
        return "请选择";
      }
      return `${this.searchdata.province} ${this.searchdata.city} ${this.searchdata.county}`;
    },
  },
  methods: {
    gorelease() {
      if (!getAccessToken()) {
        uni.navigateTo({
          url: "/pages/login/login",
        });
        return;
      }
      uni.navigateTo({
        url: `/pages/video/release/release`,
      });
    },
    editrowtype(rowtype) {
      this.rowtype = rowtype;
    },
    async getrules(bindingId) {
      let reqData = await getClassBindingFormsByBindingId({
        bindingId: bindingId,
      });
      reqData = reqData.data;
      let rule, option;
      if (reqData && reqData.formsJson) {
        let remarks = JSON.parse(reqData.formsJson);
        rule = JSON.parse(`${remarks.rule.replaceAll("\\", "\\\\")}`);
        option = JSON.parse(`${remarks.options.replaceAll("\\", "\\\\")}`);
      } else {
        rule = [];
        option = {};
      }
      rule = rule.map((e) => {
        if (e.type == "selectProps") {
          try {
            let keys = Object.keys(this.formdata[e.field]);

            e.inputs = e.props.options.filter((e2) => {
              return keys.includes(e2.value);
            });
          } catch (error) {
            e.inputs = [];
          }
        }
        return {
          ...e,
          label: e.title,
          value: e.field,
        };
      });
      return rule;
    },
    async init() {
      // this.rules=[
      // 	{
      // 		level3Type:"145",
      // 		inputs:  await this.getrules("145")
      // 	}
      // ]

      let areaTree = await getAreaTree();
      this.areaTree = areaTree.data;
      const res = await getProductClassAll();
      this.levelTypeList = res.data;
      let sortlevel2Type = this.levelTypeList.find((e) => {
        return e.fullName == "农急帮手";
      });
      sortlevel2Type = this.levelTypeList.filter((e) => {
        return e.parentId == sortlevel2Type?.id;
      });

      let sortlevel2Typids = sortlevel2Type.map((e) => e.id);
      let sortlevel3Type = this.levelTypeList.filter((e) => {
        return sortlevel2Typids.includes(e.parentId);
      });
      this.rules = [];
      for (let index = 0; index < sortlevel3Type.length; index++) {
        const element = sortlevel3Type[index];
        this.rules.push({
          level3Type: element.id,
          inputs: await this.getrules(element.id),
        });
      }
      let { data } = await getDicts(
        "transactional_mode,manage_model,platform_trading,is_check_type,farm_work_type"
      );
      // 交易模式 transactional_mode
      // 经营模式 manage_model
      // 平台交易 platform_trading
      let transactional_mode = data.filter((e) => {
        return e.dictType == "transactional_mode";
      });
      let manage_model = data.filter((e) => {
        return e.dictType == "manage_model";
      });
      let platform_trading = data.filter((e) => {
        return e.dictType == "platform_trading";
      });
      let is_check_type = data.filter((e) => {
        return e.dictType == "is_check_type";
      });
      let farm_work_type = data.filter((e) => {
        return e.dictType == "farm_work_type";
      });
      // let farm_helper_type = data.filter((e) => {
      // 	return e.dictType == "farm_helper_type";
      // });
      this.dicts = {
        transactional_mode,
        manage_model,
        platform_trading,
        is_check_type,
        sortlevel2Type: sortlevel2Type,
        levelTypeList: this.levelTypeList,
        farm_work_type,
      };
      this.$refs.sortview.init(this.query);
    },
    getGoodsList() {
      this.$nextTick(() => {
        this.$refs.getdatascrollview.onRefresh();
      });
    },
    showlevelTypePopup() {
      this.levelTypeShow = true;
    },
    levelTypeTap({ item1, item2, item3 }) {
      this.searchdata.level1Type = item1.id;
      this.searchdata.level2Type = item2.id;
      this.searchdata.level3Type = item3.id;
      this.levelTypefullName = decodeURIComponent(item3.fullName);
      this.levelTypeShow = false;
      this.getGoodsList();
    },
    showtransactionalModePopup() {
      this.transactionalModeShow = !this.transactionalModeShow;
    },
    select(item) {
      this.searchdata.transactionalMode = item.id;
      this.transactionalModeText = item.name;

      this.transactionalModeShow = false;
      this.getGoodsList();
    },
    transactionalModeShowclose() {
      this.searchdata.transactionalMode = "";
      this.transactionalModeText = "交易模式";
      this.transactionalModeShow = false;
      this.getGoodsList();
    },
    close() {
      this.searchdata.level1Type = "";
      this.searchdata.level2Type = "";
      this.searchdata.level3Type = "";
      this.levelTypefullName = "分类";
      this.levelTypeShow = false;
      this.getGoodsList();
    },
    showAreaTree() {
      this.$refs.areaTree.showPickerFn();
    },
    filterclose() {
      this.filterPop = false;
    },
    onFilterClear() {
      this.filterPop = false;
      this.searchdata.province = "";
      this.searchdata.city = "";
      this.searchdata.county = "";
      this.getGoodsList();
    },
    onfilterSearch() {
      this.filterPop = false;
      this.getGoodsList();
    },
    areachange(e) {
      this.searchdata.province = e.province;
      this.searchdata.city = e.city;
      this.searchdata.county = e.district;
    },
    sortviewchange(searchdata) {
      this.searchdata = searchdata;
      this.getGoodsList();
    },
  },
};
</script>

<style lang="scss" scoped>
// .b {
// 	height: var(--safe-bottom);
// 	padding-bottom: constant(safe-area-inset-bottom);
// 	/*兼容 IOS<11.2*/
// 	padding-bottom: env(safe-area-inset-bottom);
// 	/*兼容 IOS>11.2*/
// }

.goodslist-container {
  // height: 100vh;
  // display: flex;
  // flex-direction: column;
}

.goodslist {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0 20rpx;
}

.searchContainer {
  padding: 20rpx;
}

.release-btn {
  // position: fixed;
  // bottom: 160rpx;
  // left: 50%;
  // transform: translateX(-50%);
  margin: 0 auto;
  // margin-bottom: 60rpx;
  z-index: 999;
  background: #39c03e;
  width: 400rpx;
  height: 90rpx;
  border-radius: 20rpx;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
